<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>

        <style>
            a::before {
                content:"链接之前的文字";
            }

            a::after {
                content:"链接之后的文字";
            }

            
            
            .menu {
                position: relative;
            }

            .menu::after {
                content:"";
                /* 比较重要 */
                width: 0;
                height: 0;
                border: 5px solid black;
                border-color: black transparent transparent;
                margin-left: 2px;

                position: absolute;
                top: 10px;
            }

            /* 悬浮效果 */
            .menu:hover {
                color: red;
            }

            .menu:hover::after {
                border-color: transparent transparent red;
                top: 5px;
            }
        </style>
    </head>
    <body>
        <a herf="https://www.baidu.com">百度一下你就知道</a>

        <span class="menu">一个菜单</span>
    </body>
</html>